<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <div v-show="flag">全场清仓,全部5折</div>
    <ul :key="item.name" v-for="item in goods">
      <li>
        <div>{{ item.name }}</div>
        <div>{{ item.price*item.discount }}</div>
        <div>{{item.discount*100+'%off'}}</div>
      </li>
    </ul>

    <button @click="cost">点击开启促销活动</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goods: [
        {
          name: "mac电脑",
          price: "15000",
          discount: 1,
        },
        {
          name: "百事可乐",
          price: "3",
          discount: 1,
        },
        {
          name: "保温杯",
          price: "99",
          discount: 1,
        },
        {
          name: "保暖手套",
          price: "130",
          discount: 1,
        },
      ],
      flag: false,
      discountFin:0.5
    };
  },
  methods: {
    cost(){
      this.flag=!this.flag
      // eslint-disable-next-line no-unused-vars
      this.goods.forEach(item=>
      {item.discount=this.discount})
    },
    
  },
  computed:{
    discount:{
      get(){
        return this.discountFin
      }
    }
  },
};
</script>

<style lang="less" scoped>
ul {
  margin: 0;
  padding: 0;
  li {
    list-style: none;
    width: 200px;
    height: 80px;
    border: 2px solid #333;
  }
}
</style>